<!-- 地址选择组件 -->
<template>
  <el-form :model="form" class="demo-ruleForm" ref="form" :inline="true" :disabled ="disabled">
    <el-form-item prop="province">
      <el-select
        :clearable="true"
        v-model="form.province"
        name="province"
        placeholder="请选择省"
        @change="proChange"
        size="mini"
      >
        <el-option
          v-for="item in provinceSA"
          :key="item.value"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item prop="city">
      <el-select
        :clearable="true"
        v-model="form.city"
        name="city"
        placeholder="请选择市"
        @change="cityChange"
        size="mini"
      >
        <el-option v-for="item in citys" :key="item.value" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item prop="area">
      <el-select
        :clearable="true"
        v-model="form.area"
        name="area"
        placeholder="请选择区"
        @change="areaChange"
        size="mini"
      >
        <el-option v-for="item in areas" :key="item.value" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
import addressData from "@/components/addressData.js";
function formatData(data) {
  var result = [];
  for (var key in data) {
    result.push({
      value: key,
    });
  }
  return result;
}

export default {
  name: "levelAddr",
  props: {
    adds: {
      type: Object,
      default: () => {},
    },
    addr: {
      type: Object,
      default: () => {},
    },
    province: {
      type: String,
      default: "",
    },
    city: {
      type: String,
      default: "",
    },
    area: {
      type: String,
      default: "",
    },
    disabled:{
      type:Boolean,
      default:false
    }
  },
  data: function() {
    return {
      form: {
        province: this.province,
        city: this.city,
        area: this.area,
      },
      provinceSA: formatData(addressData),
    };
  },
  computed: {
    provinces: function() {
      return formatData(addressData);
    },
    citys: function() {
      if (this.form.province) {
        return formatData(addressData[this.form.province]);
      }
    },
    areas: function() {
      if (this.form.province && this.form.city) {
        var areaslit = [];
        var areadata = addressData[this.form.province][this.form.city];
        for (var key in areadata) {
          areaslit.push({
            value: areadata[key],
          });
        }
        return areaslit;
      }
    },
  },
  methods: {
    proChange: function(val) {
      this.form.city = "";
      this.form.area = "";
      this.$emit("updateprovice", this.form.province);
      var data = formatData(addressData[this.form.province]);
      for (var i = 0; i < data.length; i++) {
        this.$set(this.citys, i, data[i]);
      }

      if (this.adds) {
        this.adds.provinceCode = val;
        this.adds.cityCode = "";
        this.adds.regionCode = "";
      }
      if (this.addr) {
        this.addr.province = this.form.province;
        this.addr.city = this.form.city;
        this.addr.area = this.form.area;
      }
    },
    cityChange: function(val) {
      this.form.area = "";
      this.$emit("updatecity", this.form.city);
      if (this.adds) {
        this.adds.cityCode = val;
        this.adds.regionCode = "";
      }
      if (this.addr) {
        this.addr.city = this.form.city;
        this.addr.area = this.form.area;
      }
    },
    areaChange: function() {
      this.$emit("updatearea", this.form.area);
      if (this.adds) {
        this.adds.regionCode = this.form.area;
      }
      if (this.addr) {
        this.addr.area = this.form.area;
      }
      this.$forceUpdate();
    },
  },
  watch: {
    province: function(val) {
      this.form.province = val;
      this.form.city = "";
    },
    city: function(val) {
      this.form.city = val;
      this.form.area = "";
    },
    area: function(val) {
      this.form.area = val;
    },
  },
};
</script>
<style lang="scss">
.addr .el-form-item {
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}
</style>
